import React, { useState } from 'react'
import './Todolist.css'
import Todoheader from '../../components/Todoheader/Todoheader'
import Todomain from '../../components/Todomain/Todomain'
import Todofooter from '../../components/Todofooter/Todofooter'
import { useEffect } from 'react'
import { nanoid } from 'nanoid'
// import axios from 'axios'
import axios from '../../components/http/http'
import {getAlltodo,reqAddtodo,reqDeleteTodo,reqUpdateTodo,reqClearALL,reqCheckedAll} from '../../api/todo'

export default function Todolist() {

    //创建状态
    let [todo,setTodo]=useState([]);

    //新增一个todo
    let addTodo=async (title)=>{
       let data= await reqAddtodo({
            title,
            done:false
        })

        // console.log(result.data);
        //设置新的数据
        setTodo([...todo,data]);

        // let newtodo=[...todo,{
        //     id:nanoid(),
        //     title:title,
        //     done:false
        // }];
        // //设置新的todo
        // setTodo(newtodo);
    }

    //删除一个todo
    let removeTodo= async(id)=>{
        //发送删除请求
        await reqDeleteTodo(id)

        // 过滤
        let newtodo=todo.filter((item)=>{
            if(item.id!==id){
                return item;
            }
        })
        setTodo(newtodo);
    }

    //修改某个todo完成
    let updateTodo= async(id,done)=>{

        //发送请求,修改
        await reqUpdateTodo(id,done);

        let newtodo=todo.map((item)=>{
            if(item.id === id){
                item.done = !item.done;
            }
            return item;
        })
        //设置新数据
        setTodo(newtodo);
    }

    //清除全部已完成
    let clearAlltodo= async ()=>{
        //批量请求
        
        await reqClearALL(todo);
        
        let newtodo=todo.filter(item=>item.done===false);
        setTodo(newtodo);
    }

    //全选与取消全选
    let checkedalltodo= async(done)=>{
        
        await reqCheckedAll(todo,done);


        let newtodo=todo.map((item)=>{
            item.done=done;
            return item;
        })
        setTodo(newtodo);
    }


    // 测试需要使用生命周期 加载完执行
    // 否则直接调用会一直调用这个方法造成方法不停调用
    useEffect(()=>{
        //测试新增数据 todo
        // addTodo("123");

        //删除todo
        // removeTodo(2);
    },[])

    //模拟生命周期  componentDidMount  组件挂载完成后执行
    useEffect(()=>{
        async function main(){
            let data=await getAlltodo();
            // console.log(result);
            setTodo(data);
        }
        //
        main();
    },[])

    return (
        <>
            <div className="todo-container">
                <div className="todo-wrap">

                    <Todoheader addTodo={addTodo}></Todoheader>
                    {/* 把{todo}传入自定义属性todo */}
                    <Todomain updateTodo={updateTodo} removeTodo={removeTodo} todo={todo}></Todomain>
                    <Todofooter checkedalltodo={checkedalltodo} clearAlltodo={clearAlltodo} todo={todo}></Todofooter>

                </div>
            </div>

        </>
    )
}
